<template>
	<view class="bg-gray-50 min-h-screen">
		<!-- 顶部导航栏 -->
		<view class="fixed top-0 left-0 right-0 bg-white shadow-md z-10 shadow-sm">
			<view class="container mx-auto px-4 py-3 flex items-center justify-between">
				<view class="flex items-center">
					<navigator url="/pageNew/pages/employee/index" class="mr-3 text-gray-500">
						<text class="fa fa-arrow-left text-lg"></text>
					</navigator>
					<text class="text-xl font-semibold text-primary">员工薪资</text>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="container mx-auto px-4 pt-16 pb-24">
			<view class="bg-white rounded-lg shadow-card p-4 mt-4">
				<view class="bg-gray-50 p-4 rounded-lg mb-4">
					<view class="flex justify-between items-center mb-3">
						<text class="text-base font-medium">{{ currentEmployee.name }}</text>
						<text class="text-xs text-gray-500">{{ currentEmployee.number }}</text>
					</view>
					<view class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
						<view class="text-gray-500">部门: <text class="text-dark">{{ currentEmployee.department }}</text>
						</view>
						<view class="text-gray-500">职位: <text class="text-dark">{{ currentEmployee.position }}</text>
						</view>
						<view class="text-gray-500">入职日期: <text class="text-dark">{{ currentEmployee.hireDate }}</text>
						</view>
						<view class="text-gray-500">员工类型: <text
								class="text-dark">{{ getEmployeeTypeText(currentEmployee.type) }}</text></view>
					</view>
				</view>

				<form @submit.prevent="saveSalary">
					<view class="grid grid-cols-2 gap-4">
						<view>
							<text class="block text-xs text-gray-500 mb-1">基本工资 <text
									class="text-danger">*</text></text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入基本工资"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.baseSalary" required>
							</view>
						</view>
						<view>
							<text class="block text-xs text-gray-500 mb-1">绩效工资</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入绩效工资"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.performanceSalary">
							</view>
						</view>
					</view>
					<view class="grid grid-cols-2 gap-4 mt-4">
						<view>
							<text class="block text-xs text-gray-500 mb-1">津贴补贴</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入津贴补贴"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.allowance">
							</view>
						</view>
						<view>
							<text class="block text-xs text-gray-500 mb-1">加班费</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入加班费"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.overtimePay">
							</view>
						</view>
					</view>
					<view class="grid grid-cols-2 gap-4 mt-4">
						<view>
							<text class="block text-xs text-gray-500 mb-1">社保基数</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入社保基数"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.socialSecurityBase">
							</view>
						</view>
						<view>
							<text class="block text-xs text-gray-500 mb-1">公积金基数</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" placeholder="请输入公积金基数"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.housingFundBase">
							</view>
						</view>
					</view>
					<view class="grid grid-cols-2 gap-4 mt-4">
						<view>
							<text class="block text-xs text-gray-500 mb-1">个税起征点</text>
							<view class="relative">
								<text class="absolute left-3 top-2 text-gray-500">¥</text>
								<input type="number" value="5000"
									class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.taxThreshold">
							</view>
						</view>
						<view>
							<text class="block text-xs text-gray-500 mb-1">税率</text>
							<view class="relative">
								<input type="number" placeholder="请输入税率"
									class="w-full pl-3 pr-8 py-2 border border-gray-200 rounded-lg text-sm"
									v-model="salaryForm.taxRate">
								<text class="absolute right-3 top-2 text-gray-500">%</text>
							</view>
						</view>
					</view>

					<view class="bg-gray-50 p-3 rounded-lg mt-4">
						<view class="flex justify-between text-sm mb-1">
							<text class="text-gray-500">应发工资:</text>
							<text>¥{{ calculateTotalSalary().toLocaleString() }}</text>
						</view>
						<view class="flex justify-between text-sm mb-1">
							<text class="text-gray-500">社保扣除:</text>
							<text>¥{{ calculateSocialSecurity().toLocaleString() }}</text>
						</view>
						<view class="flex justify-between text-sm mb-1">
							<text class="text-gray-500">公积金扣除:</text>
							<text>¥{{ calculateHousingFund().toLocaleString() }}</text>
						</view>
						<view class="flex justify-between text-sm mb-1">
							<text class="text-gray-500">个税扣除:</text>
							<text>¥{{ calculateIncomeTax().toLocaleString() }}</text>
						</view>
						<view class="flex justify-between text-sm font-medium pt-1 border-t border-gray-200">
							<text>实发工资:</text>
							<text>¥{{ calculateNetSalary().toLocaleString() }}</text>
						</view>
					</view>

					<view class="mt-4">
						<text class="block text-xs text-gray-500 mb-1">备注</text>
						<textarea placeholder="请输入备注信息"
							class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm h-20"
							v-model="salaryForm.remark"></textarea>
					</view>

					<view class="flex justify-end space-x-2 pt-6">
						<navigator url="/pageNew/pages/employee/index"
							class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">取消</navigator>
						<button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg text-sm">保存</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentEmployee: {
					id: '',
					name: '',
					type: '',
					number: '',
					department: '',
					position: '',
					hireDate: '',
					salary: 0
				},
				salaryForm: {
					baseSalary: 0,
					performanceSalary: 0,
					allowance: 0,
					overtimePay: 0,
					socialSecurityBase: 0,
					housingFundBase: 0,
					taxThreshold: 5000,
					taxRate: 0,
					remark: ''
				}
			};
		},
		onLoad(options) {
			console.log('员工薪资页面加载完成，员工ID:', options.id);
			this.currentEmployee.id = options.id;
			this.loadEmployeeData(options.id);
		},
		methods: {
			// 加载员工数据
			loadEmployeeData(id) {
				// 模拟加载员工数据
				// 在实际应用中，这里应该调用后端API获取员工数据
				const employeeData = {
					id: id,
					name: '张三',
					type: 'fulltime',
					number: 'EMP001',
					department: '技术部',
					position: '前端开发工程师',
					hireDate: '2024-01-15',
					salary: 15000
				};

				this.currentEmployee = employeeData;

				// 初始化薪资表单
				this.salaryForm = {
					baseSalary: employeeData.salary * 0.7,
					performanceSalary: employeeData.salary * 0.2,
					allowance: employeeData.salary * 0.05,
					overtimePay: employeeData.salary * 0.05,
					socialSecurityBase: employeeData.salary,
					housingFundBase: employeeData.salary,
					taxThreshold: 5000,
					taxRate: 10,
					remark: ''
				};
			},

			// 获取员工类型文本
			getEmployeeTypeText(type) {
				switch (type) {
					case 'fulltime':
						return '全职';
					case 'parttime':
						return '兼职';
					case 'intern':
						return '实习生';
					default:
						return '';
				}
			},

			// 计算总薪资
			calculateTotalSalary() {
				return (
					(this.salaryForm.baseSalary || 0) +
					(this.salaryForm.performanceSalary || 0) +
					(this.salaryForm.allowance || 0) +
					(this.salaryForm.overtimePay || 0)
				);
			},

			// 计算社保扣除
			calculateSocialSecurity() {
				// 假设社保缴纳比例为8%
				return (this.salaryForm.socialSecurityBase || 0) * 0.08;
			},

			// 计算公积金扣除
			calculateHousingFund() {
				// 假设公积金缴纳比例为12%
				return (this.salaryForm.housingFundBase || 0) * 0.12;
			},

			// 计算个税扣除
			calculateIncomeTax() {
				const taxableIncome = this.calculateTotalSalary() -
					this.calculateSocialSecurity() -
					this.calculateHousingFund() -
					(this.salaryForm.taxThreshold || 0);

				if (taxableIncome <= 0) {
					return 0;
				}

				// 使用简化的税率计算
				return taxableIncome * (this.salaryForm.taxRate || 0) / 100;
			},

			// 计算实发工资
			calculateNetSalary() {
				return this.calculateTotalSalary() -
					this.calculateSocialSecurity() -
					this.calculateHousingFund() -
					this.calculateIncomeTax();
			},

			// 保存薪资
			saveSalary() {
				// 基本表单验证
				if (!this.salaryForm.baseSalary) {
					uni.showToast({
						title: '请填写基本工资',
						icon: 'none'
					});
					return;
				}

				// 计算总薪资
				const totalSalary = this.calculateTotalSalary();

				// 模拟保存薪资数据
				// 在实际应用中，这里应该调用后端API保存数据
				console.log('保存薪资数据:', {
					employeeId: this.currentEmployee.id,
					...this.salaryForm,
					totalSalary,
					netSalary: this.calculateNetSalary()
				});

				// 显示保存成功提示
				uni.showToast({
					title: '薪资保存成功',
					icon: 'success'
				});

				// 返回员工列表页面
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	};
</script>

<style>
	/* 引入全局样式 */
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}

	/* 自定义样式 */
	.container {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.shadow-card {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.bg-primary {
		background-color: #1E88E5;
	}

	.text-primary {
		color: #1E88E5;
	}

	.bg-gray-50 {
		background-color: #f9fafb;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.border-gray-200 {
		border-color: #e5e7eb;
	}

	.text-danger {
		color: #F44336;
	}

	.text-gray-500 {
		color: #6b7280;
	}

	.text-gray-700 {
		color: #374151;
	}

	.text-dark {
		color: #1f2937;
	}

	.text-sm {
		font-size: 14px;
	}

	.text-xs {
		font-size: 12px;
	}

	.text-base {
		font-size: 16px;
	}

	.font-semibold {
		font-weight: 600;
	}

	.font-medium {
		font-weight: 500;
	}

	.rounded-lg {
		border-radius: 8px;
	}

	.py-2 {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.py-3 {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.py-4 {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.py-6 {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.px-3 {
		padding-left: 12px;
		padding-right: 12px;
	}

	.px-4 {
		padding-left: 16px;
		padding-right: 16px;
	}

	.px-8 {
		padding-left: 32px;
	}

	.pr-8 {
		padding-right: 32px;
	}

	.mt-4 {
		margin-top: 16px;
	}

	.mb-1 {
		margin-bottom: 4px;
	}

	.mb-3 {
		margin-bottom: 12px;
	}

	.mb-4 {
		margin-bottom: 16px;
	}

	.mr-3 {
		margin-right: 12px;
	}

	.flex {
		display: flex;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-end {
		justify-content: flex-end;
	}


	.grid {
		display: grid;
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gap-4 {
		gap: 16px;
	}

	.gap-x-4 {
		column-gap: 16px;
	}

	.gap-y-2 {
		row-gap: 8px;
	}

	.shadow-md {
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	.shadow-sm {
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	}

	.z-10 {
		z-index: 10;
	}

	.fixed {
		position: fixed;
	}

	.absolute {
		position: absolute;
	}

	.top-0 {
		top: 0px;
	}

	.left-0 {
		left: 0px;
	}

	.right-0 {
		right: 0px;
	}

	.w-full {
		width: 100%;
	}

	.h-20 {
		height: 80px;
	}

	.block {
		display: block;
	}

	.border-t {
		border-top-width: 1px;
	}
</style>